<template>
  <div>
    <van-dropdown-menu>
      <van-dropdown-item
        title="综合"
        disabled
      />
      <van-dropdown-item
        title="价格"
        v-model="priceVal"
        :options="priceArr"
        @change="priceMenuChange"
      />
      <van-dropdown-item
        title="分类"
        v-model="categoryVal"
        :options="filterCategory"
        @change="cateMenuChange"
      />
    </van-dropdown-menu>
    <!-- 搜索提示 搜索结果列表长度为零，即没有相关商品-->
    <van-empty
      v-if="goodsList.length==0"
      image="search"
      description="没有搜索到找到相关商品！"
    />
    <ProductResult
      v-else
      :goodsList="goodsList"
    />
  </div>
</template>

<script>
import ProductResult from "@/components/SearchPopup/SearchProduct/ProductResult/ProductResult.vue";
export default {
  props: ["filterCategory", "goodsList"],
  emits: ["handleCateMenuChange", "handlePriceMenuChange"],
  data() {
    return {
      //下拉菜单当前选中项
      priceVal: 0,
      categoryVal: 1,
      //价格下拉选项数组
      priceArr: [
        { text: "价格由高到低", value: "desc" },
        { text: "价格由低到高", value: "asc" },
      ],
    };
  },
  components: { ProductResult },
  mounted() {
    let _this = this;
    // console.log(this.filterCategory);
    this.filterCategory.forEach((element) => {
      if (element.checked === true) {
        _this.categoryVal = element.value;
      }
    });
  },
  methods: {
    //分类选项改变,子传父传递change后的值
    cateMenuChange(value) {
      this.$emit("handleCateMenuChange", value);
    },
    //价格选项改变,子传父传递change后的值
    priceMenuChange(value) {
      this.$emit("handlePriceMenuChange", value);
    },
  },
};
</script>

<style lang='less' scoped>
</style>